<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>单位用户认证</title>
@include('common-css')
<style>
.input_box {
    width: 100%;
    height: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.input_label {
    width: 120px;
    box-sizing: border-box;
}

.application-list {
    margin-top: 20px;
}

.phase-tag {
    color: #1890ff;
    border: 1px solid #91d5ff;
    border-radius: 3px;
    background: #e6f7ff;
    font-size: 12px;
    padding: 2px 3px;
}

.ant-table-tbody > tr > td, .ant-table-thead > tr > th {
    vertical-align: middle;
    line-height: 25px;
}

.search_box {
    width: 400px;
}

.search_box .search_box_reset_btn {
    margin-left: 30px;
}
</style>
</head>
<body>
<div id="app">

</div>
</body>
</html>

<script id="appTemplate" type="x-template">
<a-locale-provider :locale="antdLocale">
    <div class="container">

        @include('admin.header-tpl')

        <main>
            <div class="common_container">

                @include('admin.aside-tpl')

                <div class="common_content">
                    <div v-if="false" class="search_box">
                        <a-input-search v-model="keyword" placeholder="请输入关键字" @search="searchManageUser"
                                        @pressEnter="searchManageUser">
                            <a-button type="primary" slot="enterButton">搜索</a-button>
                        </a-input-search>
                        <a-button @click="resetSearch" class="search_box_reset_btn">重置</a-button>
                    </div>
                    <div class="common_box">
                        <a-table class="application-list"
                                 rowKey="id"
                                 :columns="orgUserListColumns"
                                 :dataSource="orgUsers"
                                 :loading="flags.orgUserTableLoading"
                        >
                                <span slot="username" slot-scope="text, record">
                                    @{{  record.username ? record.username : '-'}}
                                </span>
                            <span slot="email" slot-scope="text, record">
                                @{{  record.email ? record.email : '-'}}
                                </span>
                            <span slot="name" slot-scope="text, record">
                                @{{  record.name ? record.name : '-'}}
                                </span>
                            <span slot="org_biz_lic_photo" slot-scope="text, record">
                                    <a-button size="small" :disabled="false"
                                              @click="showBizLicPhoto(record)">查看</a-button>
                                </span>
                            <span slot="org_contact" slot-scope="text, record">
                                @{{  record.org_contact ? record.org_contact : '-'}}
                                </span>
                            <span slot="tel" slot-scope="text, record">
                                @{{  record.tel ? record.tel : '-'}}
                                </span>
                            <span slot="operations" slot-scope="text, record">
                                    <a-popconfirm title="确认通过该单位用户认证？"
                                                  @confirm="changeOrgUserCertifyStatus(record, 'pass')" okText="是"
                                                  cancelText="否">
                                        <a-button type="primary" size="small">通过认证</a-button>
                                    </a-popconfirm>
                                    <a-popconfirm style="margin-left:12px" title="确认不通过该单位用户认证？"
                                                  @confirm="changeOrgUserCertifyStatus(record, 'fail')" okText="是"
                                                  cancelText="否">
                                        <a-button size="small">不通过</a-button>
                                    </a-popconfirm>
                                    <a-dropdown style="margin-left: 12px;" :trigger="['click']">
                                        <a class="ant-dropdown-link" href="#">
                                            更多<a-icon type="down"/>
                                        </a>
                                        <a-menu slot="overlay">
                                            <a-menu-item key="delete-user">
                                             <a-popconfirm title="确认删除该单位用户？"
                                                           @confirm="handleDeleteCertifyingOrgUser(record)" okText="是"
                                                           cancelText="否">
                                                    <div style="color: red">删除</div>
                                                </a-popconfirm>
                                            </a-menu-item>
                                        </a-menu>
                                    </a-dropdown>
                                </span>
                        </a-table>

                    </div>
                </div>
            </div>
        </main>

        <a-modal
                title="营业执照"
                v-model="flags.showOrgPhotoDialogVisible"
                @ok="closeOrgPhotoDialog"
                @cancel="closeOrgPhotoDialog"
        >
            <p>
                <img style="display: block; width: 100%;" :src="currentBizLicPhotoUrl"/>
            </p>
        </a-modal>

    </div>
</a-locale-provider>
</script>

@include('common-js')

@include('admin.header-js')
@include('admin.aside-js')

<script>
var queryParams = parseUrl(location.href).params;

const orgUserListColumns = [
    {
        width: 60,
        title: '序号',
        dataIndex: 'num'
    }, {
        width: 100,
        title: '用户名',
        dataIndex: 'username',
        scopedSlots: {
            customRender: 'username'
        }
    }, {
        width: 120,
        title: '邮箱',
        dataIndex: 'email',
        scopedSlots: {
            customRender: 'email'
        }
    }, {
        width: 150,
        title: '单位名称',
        dataIndex: 'name',
        scopedSlots: {
            customRender: 'name'
        }
    }, {
        width: 100,
        title: '营业执照',
        dataIndex: 'org_biz_lic_photo',
        scopedSlots: {
            customRender: 'org_biz_lic_photo'
        }
    }, {
        width: 100,
        title: '联系人',
        dataIndex: 'org_contact',
        scopedSlots: {
            customRender: 'org_contact'
        }
    }, {
        width: 120,
        title: '联系电话',
        dataIndex: 'tel',
        scopedSlots: {
            customRender: 'tel'
        }
    }, {
        width: 250,
        title: '操作',
        key: 'operations',
        scopedSlots: {
            customRender: 'operations'
        }
    }
];

var orgUsers = {!! json_encode($orgUsers, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!};

function processOrgUsersData(orgUsers) {
    var n = 1;
    orgUsers.forEach(item => {
        item.num = n;
        n += 1
    })
}

processOrgUsersData(orgUsers);

Vue.prototype.$axios = axios;
var app = new Vue({
    el: '#app',
    template: '#appTemplate',
    data: {
        keyword: '',
        flags: {
            showOrgPhotoDialogVisible: false,
            orgUserTableLoading: false
        },
        currentBizLicPhotoUrl: '',
        orgUserListColumns: orgUserListColumns,
        orgUsers: orgUsers,
        asideSelectedKeys: [queryParams.aside_key],
        antdLocale: antd.locales.zh_CN,
        ...AdminHeader.data,
        ...AdminAside.data,
    },
    computed: {},
    beforeMount() {
        this.loadAsideDefaultOpenKeys()
    },
    mounted() {
        this.reloadAsideData()
    },
    methods: {
        searchManageUser() {
            if (this.keyword == '') {
                antd.message.warn('请输入搜索关键字', 1);
                return false
            }
            this.reloadData()
        },
        resetSearch() {
            this.keyword = '';
            this.reloadData()
        },
        handleDeleteCertifyingOrgUser(user) {
            console.log('application', user);
            this.deletingApplicationForm = true;
            antd.message.loading('正在处理，请稍候', 0);
            axios.post('/api/auth/delete-user', {
                user_id: user.id
            }).then(res => {
                antd.message.destroy();
                console.log(res);
                var data = res.data;
                if (data.ok) {
                    antd.message.success('删除成功');
                    // this.reloadData()
                    history.go(0)
                } else {
                    antd.message.warn(data.message, 3)
                }
                this.deletingApplicationForm = false
            })
        },
        closeOrgPhotoDialog() {
            this.currentBizLicPhotoUrl = null;
            this.flags.showOrgPhotoDialogVisible = false
        },
        changeOrgUserCertifyStatus(user, status) {
            axios.post('/api/auth/change-org-user-certify-status', {
                user_id: user.id,
                status: status
            }).then(res => {
                let data = res.data;
                if (data.ok) {
                    antd.message.success('操作成功');
                    // this.reloadData()
                    history.go(0)
                } else {
                    antd.message.destroy();
                    antd.message.warn(data.message, 3)
                }
            })
        },
        showBizLicPhoto(user) {
            this.currentBizLicPhotoUrl = user.org_biz_lic_photo;
            this.flags.showOrgPhotoDialogVisible = true
        },
        reloadData() {
            this.orgUserTableLoading = true;
            axios.post('/api/auth/get-certifying-org-user', {
                keyword: this.keyword
            }).then(res => {
                this.orgUserTableLoading = false;
                antd.message.destroy();
                var orgUsers = res.data;
                console.log(orgUsers);
                processOrgUsersData(orgUsers);
                this.orgUsers = orgUsers
            })
        },
        ...AdminHeader.methods,
        ...AdminAside.methods,
    }
})
</script>